<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flushbonading</title>
  <link href="//unpkg.com/layui@2.9.0/dist/css/layui.css" rel="stylesheet">
  <script src="//unpkg.com/layui@2.9.0/dist/layui.js"></script>
</head>
<style>
  #de-view-container {
    display: inline-flex;
    width: 500px;
    height: 500px;
    overflow: auto;
  }
  .view-iframe {
    width: 100%;
    border: 0;
    height: calc(100% - 5px);
  }
  .setting {
    padding: 40px;
  }
  .layui-form-label {
    width: 200px !important;
  }
  .layui-input-block {
    margin-left: 200px !important;
  }
  .button-container {
    float: right;
  }
</style>
<body>
<form class="layui-form layui-form-pane setting" style="display: flex" action="">
  <div class="layui-form-item" style="width: 80%;margin-right: 20px;">
    <label class="layui-form-label">预览发送参数1</label>
    <div class="layui-input-block">
      <input type="text" name="sendParams" th:value="${vo.sendParams}" autocomplete="off" placeholder="请输入" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item button-container">
    <button class="layui-btn" lay-submit lay-filter="demo4">参数发送</button>
  </div>
</form>
  <iframe height="600" width="1000" id="de-view-iframe" src="" ></iframe>
</body>
<script th:inline="javascript" type="module">
  window.onload = () => {
    var xhr = new XMLHttpRequest();
    var account = [[${vo.account}]]
    var url = `/token/${account}`
    var busiFlag = 'dashboard'
    var dvId = [[${vo.dashboardId}]]
    var domain = [[${vo.domain}]]
    var type = 'Dashboard'
    var outerParams = [[${vo.outerParams}]]
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        const token = xhr.response
        let url = domain + "#/chart-view"
        const params = {
          busiFlag: busiFlag,
          dvId: dvId,
          type: type,
          embeddedToken: token,
          outerParams: outerParams
        }
        const iframe = document.getElementById("de-view-iframe")
        iframe.src = url

        window.addEventListener('message', event => {
          if (event.data?.eventName === 'de_inner_params') {
            console.log("内部消息 Iframe DashboardView："+JSON.stringify(event.data))
            alert('DataEase 内部消息 Iframe DashboardView：'+JSON.stringify(event.data))
          }else if(event.data?.eventName === 'canvas_init_ready'){
            console.log("内部消息："+JSON.stringify(event.data))
          }else {
            if (event.data?.msgOrigin !== 'de-fit2cloud') {
              return
            }
            params['de-embedded'] = true
            var contentWindow = iframe.contentWindow;
            contentWindow.postMessage(params, url)
          }
        })
      }
    }
    xhr.open('get', url, true);
    xhr.send();
  }

  var layer = null;
  layui.use(['form'], function(){
    var form = layui.form;
    layer = layui.layer;
    // 提交事件
    form.on('submit(demo4)', function(data){
      var field = data.field;
      console.log('send: ' + JSON.stringify(field.sendParams))
      const iframe = document.getElementById("de-view-iframe")
      var contentWindow = iframe.contentWindow;
      contentWindow.postMessage(JSON.parse(field.sendParams), '*')
      return false;
    });
  });
</script>

</html>